<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10_语法-v-pre指令使用</title>
  <!-- 
  在 Vue 中， `v-pre`  指令用于跳过当前元素及其子元素的编译过程。这意味着，包含  `v-pre`  的元素中的内容不会被 Vue 的模板编译器解析，而是直接原样输出。这在需要显示原始的模板语法或避免不必要的编译时非常有用。
  1. 基本用法
  `v-pre`  可以应用于任何 HTML 元素。它的基本语法如下：
  <template>
    <div>
      <p v-pre>{{ thisWillNotBeCompiled }}</p>
      <p>{{ thisWillBeCompiled }}</p>
    </div>
  </template>
  在这个例子中， `<p v-pre>{{ thisWillNotBeCompiled }}</p>`  中的内容不会被 Vue 编译，而是原样输出为  `{{ thisWillNotBeCompiled }}` 。而第二个  `<p>`  标签中的内容会被正常编译。

  2. 适用场景
  - 显示原始模板语法：当你需要在页面上显示 Vue 的模板语法（如  `{{ }}` ）而不希望它被解析时，可以使用  `v-pre` 。
  - 性能优化：在某些情况下，如果你知道某些内容不需要被 Vue 编译，可以使用  `v-pre`  来提高性能，减少编译的开销。

  3. 示例
  <template>
    <div>
      <h1 v-pre>{{ title }}</h1>
      <p>这是一个正常编译的内容：{{ message }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        title: '这是一个标题',
        message: '这是动态消息',
      };
    },
  };
  </script>
  在这个例子中， `<h1>`  中的内容会被直接输出为  `{{ title }}` ，而不会被编译为  `这是一个标题` 。而  `<p>`  中的内容会正常显示为  `这是动态消息` 。

  4. 注意事项
  - 不影响子元素： `v-pre`  只影响当前元素及其子元素的编译。如果子元素没有使用  `v-pre` ，它们仍然会被编译。
  - 与其他指令的组合：如果与其他指令（如  `v-if` 、 `v-for`  等）一起使用， `v-pre`  仍然会生效，跳过该元素的编译。

  总结
  -  `v-pre`  指令：用于跳过当前元素及其子元素的编译过程，直接原样输出内容。
  - 适用场景：显示原始模板语法和性能优化。
  - 不影响子元素：只影响当前元素及其子元素。

  -->
</head>
<body>

  <div id="app">
    <div v-pre>
      {{ message }}
      <p>count</p>
    </div>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue!',
          count: 0,
        }
      },
    })

    app.mount('#app')

  </script>
  
</body>
</html>